I have a link element that contains a div element. My requirement is to change the background color of the div element whenever the mouse is hovered over the link. So, initially I tried
div:hover {
background-color: #abcdef;
}
This works fine in Firefox. However, IE doesn’t like the hover pseudo class for anything other than an “a” element. So, after a bit of tinkering, I got it working with
a:hover div {
background-color: #abcdef;
}
This works in both IE and Firefox. One thing though, the DIV element starts changing color whenever the mouse is hovered not just on the DIV itself, but on the A element itself. So, if the DIV happens to be covering the entire A area, then it’s not a problem, but otherwise, depending on the usecase, this may or may not be an acceptable solution. In my specific case, it is an acceptable solution. So, I am done further research on how to get the DIV to change the color when only that element has a mouse hover in IE.
poeticcode 
Hmm, i understand what you have done, but i still have a problem. I have made menu containing of 4 items, and its made of divs who have gifed animations that should appear when you mouse hover it. This is the part of the CSS that i’v been using for that. Its wery simple:
The question still stands, how can i make that hover work in IE?
#fourSwap
{
background-image:url(../img/indexPic/animal_logo_a.gif);
background-repeat:no-repeat;
background-position:center;
width: 169px;
height:79px;
}
#fourSwap:hover
{
background-image:url(../img/indexPic/animal_logo_b.gif);
}
If your DIV is not enclosed by a link like my case I mentioned, then you can use javascript and change the css class or a css style property of the element within the onmouseover and onmouseout events.
http://www.GiftPickr.com/ uses this concept as well. Place cursor on the gift guide chart blocks and see the color changing to green. SPAN is used instead of DIV since using DIV in an A element is not valid. End result is the same.
Hi there!
Without javascript is possible like this
.cecil
{
width:150px;
height:150px;
background-color:red;
}
.cecil:hover
{
background-color:green;
}
Ize
I make now an ASPX site. BUT ITS NOT WORKING!!!!!!!!!!!!!!!!!!!
try it like this:
div#fourSwap:hover { … } or
div.fourSwap:hover { … }
and (important(!! ;))): it works only in the strict-modus not in the transitional!!
thanks!
I can’t seem to get it to work:
.homebox {
width: 180px;
float: left;
padding: 5px;
border: 1px solid #FFF;
}
.homebox:hover {
border: 1px solid #999;
}
I’m using class instead of id – can i get this to work in IE and Firefox?
Enclosing a div tag within an anchor tag is against the W3C standards. I do not suggest this method.
(hehe sorry for my bad english i’m not native speaker)
DOH!! ¬¬ the past comments maybe not works because … a:hover isn’t ?? LOL
¬¬ IE is a shit with this and it compels us to write more code!! I remember read an article where the author says IE have much bugs in CSS tratamient (and JavaScript). I think Microsoft don’t want belive lose the war already, and he needs appears with W3C… 🙂 the others explorers Works very good… =/
Am… the other comments …
.class:hover {
background-color: #abcdef;
}
works in Firefox, Opera and Safari… but IE again is the black sheep..
a:hover .class {
background-color: #abcdef;
}
this work in all explorers, hehe don’t question why, but works!
😛
Thank Eric it works nicely,
By the way one more thing, while I’m here I should ask you pros about.. I just found out about setting opacity in CSS, now can any one provide me with an example of making a whole div go from 50% opacity to 100% on hover? I’ve been trying but again it stuffs up in IE (I currently have IE 7)
Div in an anchor? pretty sure you can’t do that, although you may be able to get your desired end result, I don’t think putting block elements inside of inline elements is correct html.
use javascript
You ought to be a part of a contest for one of the best websites online. https://romneybindersgame.com/riwayat-kasino-di-indonesia/ I’m going to recommend this website